<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <text class="header-title">美食推荐</text>
    </view>
    
    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="搜索美食店铺" v-model="searchKeyword" @input="handleSearch" />
      </view>
    </view>
    
    <!-- 美食店铺列表 -->
    <view class="food-list" v-if="foodStoreList.length > 0">
      <view class="food-card" v-for="store in filteredFoodStoreList" :key="store.id" @click="viewStoreDetail(store.id)">
        <image class="store-image" :src="getImageUrl(store.coverImage)" mode="aspectFill"></image>
        <view class="store-info">
          <text class="store-name">{{ store.name }}</text>
          <text class="store-desc">{{ store.description }}</text>
          <view class="store-meta">
            <text class="store-category">{{ store.category }}</text>
            <text class="store-rating">⭐ {{ store.rating }}</text>
          </view>
          <view class="store-footer">
            <text class="store-status" :class="store.status === '正常营业' ? 'status-active' : 'status-inactive'">
              {{ store.status }}
            </text>
            <text class="store-address">{{ store.address }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else-if="!loading">
      <text class="empty-icon">🍽️</text>
      <text class="empty-text">暂无美食店铺数据</text>
    </view>
    
    <!-- 加载中状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !loading">
      <text>上拉加载更多</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      foodStoreList: [],
      loading: false,
      hasMore: true,
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    // 过滤后的美食店铺列表
    filteredFoodStoreList() {
      if (!this.searchKeyword.trim()) {
        return this.foodStoreList;
      }
      
      const keyword = this.searchKeyword.toLowerCase();
      return this.foodStoreList.filter(store => {
        return store.name.toLowerCase().includes(keyword);
      });
    }
  },
  onLoad() {
    // 页面加载时获取美食店铺数据
    this.loadFoodStores();
  },
  onReachBottom() {
    // 上拉加载更多
    if (this.hasMore && !this.loading) {
      this.loadMoreFoodStores();
    }
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.refreshFoodStores();
  },
  methods: {
    /**
     * 加载美食店铺数据
     */
    async loadFoodStores() {
      try {
        this.loading = true;
        const response = await new Promise((resolve, reject) => {
          uni.request({
            url: 'http://127.0.0.1:8687/admin/foodStore/page',
            method: 'POST',
            data: {},

            success: (res) => {
              resolve(res);
            },
            fail: (err) => {
              reject(err);
            }
          });
        });
        
        if (response.statusCode === 200 && response.data.code === 200) {
          this.foodStoreList = response.data.data.records;
          this.hasMore = this.currentPage < response.data.data.pages;
        } else {
          uni.showToast({
            title: '加载失败，请重试',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('Load food stores error:', error);
        uni.showToast({
          title: '网络连接失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
        uni.stopPullDownRefresh();
      }
    },
    
    /**
     * 加载更多美食店铺数据
     */
    async loadMoreFoodStores() {
      try {
        this.loading = true;
        this.currentPage++;
        
        const response = await new Promise((resolve, reject) => {
          uni.request({
            url: 'http://127.0.0.1:8687/admin/foodStore/page',
            method: 'POST',
            data: {},
            success: (res) => {
              resolve(res);
            },
            fail: (err) => {
              reject(err);
            }
          });
        });
        
        if (response.statusCode === 200 && response.data.code === 200) {
          this.foodStoreList = [...this.foodStoreList, ...response.data.data.records];
          this.hasMore = this.currentPage < response.data.data.pages;
        } else {
          uni.showToast({
            title: '加载失败，请重试',
            icon: 'none'
          });
          this.currentPage--;
        }
      } catch (error) {
        console.error('Load more food stores error:', error);
        uni.showToast({
          title: '网络连接失败',
          icon: 'none'
        });
        this.currentPage--;
      } finally {
        this.loading = false;
      }
    },
    
    /**
     * 刷新美食店铺数据
     */
    refreshFoodStores() {
      this.currentPage = 1;
      this.foodStoreList = [];
      this.hasMore = true;
      this.loadFoodStores();
    },
    
    /**
     * 处理搜索
     */
    handleSearch() {
      // 搜索功能已经通过computed属性filteredFoodStoreList实现
      // 这里可以添加搜索节流或其他逻辑
    },
    
    /**
     * 查看店铺详情
     */
    viewStoreDetail(storeId) {
      // 预留跳转到详情页的接口
      // uni.navigateTo({
      //   url: `/pages/food/foodDetail?id=${storeId}`
      // });
      console.log('View store detail:', storeId);
    },
    
    /**
     * 获取图片的完整URL
     */
    getImageUrl(relativePath) {
      if (!relativePath) {
        return '/static/logo.png'; // 默认图片
      }
      
      // 基址前缀
      const baseUrl = 'http://192.168.199.178:9000/fznostalgia';
      
      // 拼接完整的图片URL
      return baseUrl + relativePath;
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: rgba(26, 95, 122, 0.3);
}

.header {
  margin-bottom: 40rpx;
}

.header-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

.search-bar {
  margin-bottom: 40rpx;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 20rpx;
  padding: 0 30rpx;
  height: 80rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.search-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
  color: #666;
}

.search-input input {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: #333;
}

.food-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.food-card {
  display: flex;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.food-card:active {
  transform: scale(0.98);
}

.store-image {
  width: 240rpx;
  height: 240rpx;
  border-radius: 20rpx 0 0 20rpx;
}

.store-info {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.store-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #1a5f7a;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.store-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.store-category {
  font-size: 28rpx;
  color: #3d8c9f;
  background-color: rgba(61, 140, 159, 0.1);
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
}

.store-rating {
  font-size: 28rpx;
  color: #ff9500;
}

.store-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-status {
  font-size: 26rpx;
  padding: 3rpx 12rpx;
  border-radius: 12rpx;
}

.status-active {
  color: #4cd964;
  background-color: rgba(76, 217, 100, 0.1);
}

.status-inactive {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.1);
}

.store-address {
  font-size: 26rpx;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

.empty-state,
.loading-state {
  text-align: center;
  padding: 100rpx 0;
  color: #666;
}

.empty-icon {
  font-size: 120rpx;
  display: block;
  margin-bottom: 30rpx;
}

.empty-text,
.loading-text {
  font-size: 32rpx;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #666;
  font-size: 28rpx;
}
</style>